<template>
    <div>
        <el-dialog
                id="pricesDialog"
                title="入库操作"
                :visible.sync="dialogshow"
                :before-close="dialogClose"
                style="display:none;"
                top="10vh"
                width="90%"
                :fullscreen="fullscreen"
        >
            <dialog-tools
                    v-bind:back="true"
                    v-bind:next="true"
                    v-bind:goback="true"
                    v-bind:prev="true"
                    v-bind:screen="true"
                    @clickfullscreen="clickfullscreen"
            >
            </dialog-tools>
            <el-tabs class="tabs-table customer-tabs" type="border-card" v-model="activeName">
                <el-tab-pane label="基本信息" name="first">
                    <el-form size="mini" :model="customer" label-width="100px">
                        <el-form-item label="单号" prop="name">
                            <el-input value="12312" disabled auto-complete="off" class="clientName"></el-input>
                        </el-form-item>

                        <el-form-item label="物品名称">
                            <el-input v-model="customer.customercode" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="入库类别" prop="customercate">
                            <el-select v-model="customer.customercate" filterable style="width:100%;">
                                <el-option v-for="item in crmsclientRank" :label="item.typename"
                                           :value="item.typename"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="石类" prop="creditrank">
                            <el-select v-model="customer.creditrank" filterable style="width:100%;">
                                <el-option v-for="item in crmsclientStatic" :label="item.typename"
                                           :value="item.typename"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="级别" prop="creditrank">
                            <el-select v-model="customer.creditrank" filterable style="width:100%;">
                                <el-option v-for="item in crmsclientStatic" :label="item.typename"
                                           :value="item.typename"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="筛号" prop="creditrank">
                            <el-select v-model="customer.creditrank" filterable style="width:100%;">
                                <el-option v-for="item in crmsclientStatic" :label="item.typename"
                                           :value="item.typename"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="单位">
                            <el-input v-model="customer.creditline" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="客户代码">
                            <el-input v-model="customer.creditline" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="订单号">
                            <el-input v-model="customer.capital" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="石卡号">
                            <el-input v-model="customer.annualsales" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="好石数">
                            <el-input v-model="customer.bankaccount" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="好石重">
                            <el-input v-model="customer.bank" auto-complete="off"></el-input>

                        </el-form-item>

                        <el-form-item label="烂石数">
                            <el-input v-model="customer.certificateno" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="烂石重">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="价格">
                            <el-input v-model="customer.trademark" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="主石名称">
                            <el-input v-model="customer.website" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="主石编号">
                            <el-input v-model="customer.lperson" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="主石数量">
                            <el-input v-model="customer.lphone" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="主石克拉重">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="副石名称">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="副石数量">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="副石编号">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="生产日期">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="仓位选择">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="出厂价格">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="金额">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <!--                <el-form-item label="送货方式">
                                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                                        </el-form-item>-->


                        <el-form-item label="物流公司">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="送货方式" prop="creditrank">
                            <el-select v-model="customer.creditrank" filterable style="width:100%;">
                                <el-option v-for="item in crmsclientStatic" :label="item.typename"
                                           :value="item.typename"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="物流费用">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="物流单号">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="录单人">
                            <el-input v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="备注" style="width:100%">
                            <el-input type="textarea" v-model="customer.address" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="视频上传">
                            <el-upload
                                    class="upload-demo"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :on-preview="handlePreview"
                                    multiple
                                    :limit="3"
                                    :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传MP4/AVI/MOV文件，且不超过100M</div>
                            </el-upload>
                        </el-form-item>

                        <el-form-item label="图片上传">
                            <el-upload
                                    class="upload-demo"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :on-preview="handlePreview"
                                    multiple
                                    :limit="3"
                                    :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-dropdown style="float:left;margin-left: 15px" >
                    <el-button>
                        关联数据<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>设计图</el-dropdown-item>
                        <el-dropdown-item>客来石</el-dropdown-item>
                        <el-dropdown-item>客来金</el-dropdown-item>
                        <el-dropdown-item>其它...</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <el-button type="primary" >打印</el-button>
                <el-button type="primary" >订单预览</el-button>
                <el-button type="primary" @click="dialogCustomerInfo = false;handleButtons(10)">客户跟进</el-button>
                <el-button @click="dialogClose">取 消</el-button>
                <el-button type="primary" @click="dialogAdd">确定</el-button>
            </div>
        </el-dialog>

        <customer-genji
                v-bind:dialogshow="dialogCustomerGenji"
                @dialog_close="dialog_close_genji_customer"
        ></customer-genji>
    </div>
</template>

<style scoped>
    #customerDialog .el-form-item {
        width: 45%;
        float: left;
        margin-bottom: 5px;
    }

    #customerDialog .el-form-item:nth-child(odd) {
        float: right;
    }

    .el-dialog__body,.el-form{
        overflow: hidden;
    }

    #customerDetail .el-form{
        border: 1px solid #c5c5c5;
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    /*#customerDialog .el-dialog__footer {*/
    /*    width: 45%;*/
    /*    clear: both;*/
    /*}*/


    .td-lable,
    .td-info {
        display: inline-table;
        vertical-align: -webkit-baseline-middle;
    }

    .td-lable {
        text-align: right;
        width: 100px;
    }

    .td-info {
        margin-left: 20px;
    }

    ul {
        list-style-type: none;
    }

    ul span {
        display: inline-table;
        min-width: 200px;
    }

    .tabs-table td {
        height: 50px;
        border-bottom: 1px solid #dcdfe6;
    }
    .customer-tabs .el-tab-pane{
        height:400px;
        overflow: auto;
        padding:20px;
    }
</style>

<script>
  module.exports = {
    methods:{
      dialogAdd(){
        this.$confirm('是否继续操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      dialogClose(){
        this.$emit('dialog_close',1)
      },
      clickfullscreen () {
        this.fullscreen = !this.fullscreen
      },
      //跟进
      dialog_close_genji_customer (val) {
        console.log(val)
        this.dialogCustomerGenji = false
      },
      handleButtons (val) {
        console.log(2222)
        switch (val) {
          case 1:
            this.dialogSendMessage = 'true'
            console.log(this.dialogSendMessage)
            break

          case 10:
            console.log(333)
            this.dialogCustomerInfo = 'false'
            this.dialogCustomerGenji = 'true'
            console.log(this.dialogCustomerGenji)
            break

        }
      },
      addData() {
        this.tableDatas.push({
          edit: true,
        });
      },
      //确认添加
      confirmAdd(row) {
        row.edit = false;
      },
      //修改
      editData(row) {
        row.edit = true;
      },
      //删除
      deleteData(row, index) {
        this.tableDatas.splice(index, 1);
      },

    },
    props: ['dialogshow'],
    data (){
      return {
        activeName:'first',
        dialogSendMessage:false,
        dialogCustomerInfo:false,
        dialogCustomerGenji:false,
        // dialogshow:false,
        Sendmssages:{
          address:'',
          customercate:'',
          cate:'',
          nickname:'',
          creditrank:'',
          name:'',
        },

        tableDatas:[],

        customer: {
          name: '',
          customercode: '',
          customerstatus: '',
          customercate: '',
          creditrank: '',
          creditline: '',
          capital: '',
          annualsales: '',
          bank: '',
          certificateno: '',
          address: '',
          area: '',
          brand: '',
          bankaccount: '',
          trademark: '',
          website: '',
          lperson: '',
          lphone: '',
          contacts: '',

          phone: '',
          phonenum: '',
          weixin: '',
          email: '',
          fax: '',
          resource: '',
          requirement: '',
          ordercountmonth: '',
          purchaseamountmonth: '',
          ordercountyear: '',
          purchaseamountyear: '',
          customerstaffname: '',
          customerstaffcode: '',
          operator: '',
          insertime: '',
          remark: '',
        },

        form: {
          typeId: ''
        },

        select: {
          name: '',
          introduce: '',
          cooperative_brand: '',
          customer_status: '',
          customer_level: '',
          now_principal_id: '',
          last_follow_up_date: '',
          create_date: '',
        },

        crmsclientStatic: [
          { typename: 'A级' },
          { typename: 'B级' },
          { typename: 'C级' },
          { typename: 'D级' },
        ],

        crmsclientRank: [
          { typename: 'A类' },
          { typename: 'B类' },
          { typename: 'C类' },
          { typename: 'D类' },
        ],

        customerstaffs: [
          { typename: '客服1' },
          { typename: '客服2' },
          { typename: '客服3' },
          { typename: '客服4' },
        ],

        changeReason: [
          { typename: '交接原因一' },
          { typename: '交接原因二' },
          { typename: '交接原因三' },
          { typename: '其他' },
        ],

        options1: [],
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },


        scheduleType: [
          { typename: '业务拓展' },
          { typename: '订单跟进' },
          { typename: '料/款跟进' },
        ],

        cates: [
          { typename: '意向客户' },
          { typename: '老客户' },
        ],

        fullscreen: false,
      }
    },
    components:{
      'dialog-tools': 'url:../tools/dialog-tools.vue',
      'genjin-jilu': 'url:../genjin-jilu.vue',
      'customer-genji': 'url:../customer-genji.vue',
    }
  }
</script>
